import React, { Component } from "react";
import "./index.css";

export default class Footer extends Component {
  handleChecked = (event) => {
    console.log(event.target.checked);
    this.props.checkAllTodo(event.target.checked);
  };



  //清除所有完成的

  render() {
    const { todos,clearAllDone } = this.props;

    const total = todos.length;

    const doneCount = todos.reduce((pre, todo) => {
      return pre + (todo.done ? 1 : 0);
    }, 0);

    return (
      <div className="todo-footer">
        <label>
          {/*defaultChecked 仅初次生效 */}
          <input
            type="checkbox"
            onChange={this.handleChecked}
            checked={doneCount === total && doneCount !== 0 ? true : false}
          />
        </label>
        <span>
          <span>已完成{doneCount}</span> / 全部{total}
        </span>
        <button onClick={clearAllDone} className="btn btn-danger">清除已完成任务</button>
      </div>
    );
  }
}
